<template>
  <span class="fold-wrapper" :class="[appStore.isCollapse ? 'fold-open-status' : 'fold-close-status']" @click="toggleFold">
    <MenuFoldOutlined /> <span v-if="appStore.isCollapse == false" class="tip-text">收起全部</span>
  </span>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { IconMenuFold as MenuFoldOutlined } from '@arco-design/web-vue/es/icon'
  import useAppConfigStore from '@/store/modules/app-config'
  export default defineComponent({
    name: 'Humburger',
    components: { MenuFoldOutlined },
    setup() {
      const appStore = useAppConfigStore()
      function toggleFold() {
        appStore.toggleCollapse(!appStore.isCollapse)
      }
      return {
        appStore,
        toggleFold,
      }
    },
  })

  export class Humburger {
  }
</script>

<style lang="less" scoped>
  .fold-open-status {
    transform: rotate(180deg);
  }
  .fold-close-status {
    transform: rotate(0deg);
  }
  .fold-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #4e5969;
    &:hover {
      color: #262525;
      cursor: pointer;
    }
  }

  .tip-text {
    font-size: 12px;
    margin-left: 4px;
    white-space: nowrap;
  }
</style>
